<template>
	<view class="pageview">
		
		<view class="formView">
			<text class="title1">{{ $t('login.login.title2') }}<br />{{ $t('login.login.title3') }}</text>
			<view style="margin-top: 40rpx;">
				<view style="display: flex;flex-direction: column;align-items: center;">
					<cl-avatar :src="fromdata.avatar_url?localImg:''" size="150rpx" @click="upavatar"></cl-avatar>
					<text v-if="!fromValidate.avatar_url.validate" style="color: #860000;font-size: 20rpx;margin-top: 20rpx;">{{fromValidate.avatar_url.detail}}</text>	
				</view>
				<u-input v-model="fromdata.nick_name" :placeholder="$t('login.register.input_nick_name')" fontSize="28rpx"  color="#fff" placeholderStyle="color: #595A66" prefixIcon="tags-fill"
					prefixIconStyle="font-size: 45rpx;color: #85868C" border="none" style="margin-top: 40rpx;" :customStyle="inputClass"></u-input>
				<text v-if="!fromValidate.nick_name.validate" style="color: #860000;font-size: 20rpx;">{{fromValidate.nick_name.detail}}</text>	
				<u-input v-model="fromdata.login_name" :placeholder="$t('login.register.input_username')" fontSize="28rpx" color="#fff" placeholderStyle="color: #595A66" prefixIcon="account-fill"
					prefixIconStyle="font-size: 45rpx;color: #85868C" border="none" style="margin-top: 40rpx;" :customStyle="inputClass"></u-input>
				<text v-if="!fromValidate.login_name.validate" style="color: #860000;font-size: 20rpx;">{{fromValidate.login_name.detail}}</text>
				<u-input v-model="fromdata.login_pwd" password :placeholder="$t('login.register.input_password')" fontSize="28rpx" color="#fff" placeholderStyle="color: #595A66" prefixIcon="lock-fill"
					prefixIconStyle="font-size: 45rpx;color: #85868C" border="none" style="margin-top: 40rpx;" :customStyle="inputClass"></u-input>
				<text v-if="!fromValidate.login_pwd.validate" style="color: #860000;font-size: 20rpx;">{{fromValidate.login_pwd.detail}}</text>
				
				<template v-if="$config.is_need_invite_code">
					<u-input v-model="fromdata.parent_code" :placeholder="$t('login.register.input_parent_code')" fontSize="28rpx" color="#fff" placeholderStyle="color: #595A66" prefixIcon="integral-fill"
						prefixIconStyle="font-size: 45rpx;color: #85868C" border="none" style="margin-top: 40rpx;" :customStyle="inputClass"></u-input>
					<text v-if="!fromValidate.parent_code.validate" style="color: #860000;font-size: 20rpx;">{{fromValidate.parent_code.detail}}</text>
				</template>
				
				
				<view style="color: #808082;font-size: 24rpx;margin: 30rpx 0;">
					{{$t("login.register.loginText")}}
					<text class="login" @click="goLogin" >{{$t("login.login.title")}}</text>  
				</view>
			</view>
		</view>
		<view @click="confirmRegistration" class="ControlsBtn">
			<text class="ControlsBtn__text">{{$t("login.register.title")}}</text>
		</view>
		<view style="position: fixed;bottom: 80rpx;">
			<u-checkbox-group v-model="agreement" placement="column" :class="{'shake':shake}">
				<u-checkbox name="name" size="14" :iconWrapStyle="{}">
					<view style="display: flex;align-items: center;font-size: 26rpx;">
						{{$t("login.agreement.readAgree")}}<navigator url="/pages/login/agreement?type=0" @tap.stop class="register">{{$t('login.agreement.title')}}</navigator>
						{{$t("login.agreement.and")}}
						<navigator url="/pages/login/agreement?type=1" @tap.stop class="register">{{$t('login.agreement.title1')}}</navigator>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
import uploadRegister from '@/common/upload/upload_register.js'
export default {
	data() {
		return {
			inputClass: {
				backgroundColor: 'rgba(255, 255, 255, 0.1)',
				height: '90rpx',
				width: '570rpx',
				borderRadius:'20rpx',
				padding: '0 20rpx'
			},
			localImg:'',
			fromdata:{
				nick_name:'',
				avatar_url:'',
				login_name:'',
				login_pwd:'',
				avatar_url:'',
				source_type:'0',
				parent_code:'',
			},
			fromValidate:{
				avatar_url:{
					validate:true,
					detail:''
				},
				nick_name:{
					validate:true,
					detail:''
				},
				login_name:{
					validate:true,
					detail:''
				},
				login_pwd:{
					validate:true,
					detail:''
				},
				parent_code:{
					validate:true,
					detail:''
				}
			},
			$config:{},
			agreement: ['name'],
			shake:false,//抖动动画
		};
	},
	onLoad() {
		this.$config = uni.$config
	},
	
	methods: {
		upavatar(){
			uni.chooseImage({
				count:1,
				sourceType:['album'],
				crop: { //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
					width: 500,
					height: 500
				},
				success: async(res) => {
				   let loadSrc = res.tempFilePaths[0];
				   try {
						let res = await uploadRegister.uploadFile(loadSrc, 'avatar', 'image')
						this.fromdata.avatar_url = res.url
						this.localImg = loadSrc
				   } catch (e) {
				   }
				}
			})
		},
		validateLoginNameInput() {
		    // 定义正则表达式
		    const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{4,}$/;
		    // 使用正则表达式进行验证
		    return regex.test(this.fromdata.login_name);
		},
		validateLoginPwdInput() {
		    // 定义正则表达式
		    const regex = /^.{6,}$/;
		    // 使用正则表达式进行验证
		    return regex.test(this.fromdata.login_pwd);
		},
		getTimeZone() {
			var offsetMinutes = new Date().getTimezoneOffset();
			var offsetHours = Math.abs(Math.floor(offsetMinutes / 60)); // 将偏差值转换为小时
			var offsetSign = offsetMinutes < 0 ? "+" : "-"; // 根据时区偏差的正负号确定东西半球
			var offsetMinutes = Math.abs(offsetMinutes % 60); // 获取分钟偏差
			return "GMT" + offsetSign + offsetHours.toString().padStart(2, '0') + ":" + offsetMinutes.toString().padStart(2, '0');
		},
		async confirmRegistration(){
			if(!this.agreement.length){
				this.triggerFeedback()
				return
			}
			this.fromValidate.avatar_url.validate = this.fromdata.avatar_url != '' && this.fromdata.avatar_url ? true : false
			if(!this.fromValidate.avatar_url.validate){
				this.fromValidate.avatar_url.detail = '头像不能为空'
			}
			this.fromValidate.nick_name.validate = this.fromdata.nick_name != '' && this.fromdata.nick_name ? true : false
			if(!this.fromValidate.nick_name.validate){
				this.fromValidate.nick_name.detail = '昵称不能为空'
			}
			this.fromValidate.login_name.validate = this.validateLoginNameInput()
			if(!this.fromValidate.login_name.validate){
				this.fromValidate.login_name.detail = '用户名必须为4位及以上字母数字组合'
			}
			this.fromValidate.login_pwd.validate = this.validateLoginPwdInput()
			if(!this.fromValidate.login_pwd.validate){
				this.fromValidate.login_pwd.detail = '密码必须为6位以上'
			}
			
			if(this.$config.is_need_invite_code && this.$config.is_required_invite_code){
				this.fromValidate.parent_code.validate = this.fromdata.parent_code != ""
				if(!this.fromValidate.parent_code.validate){
					this.fromValidate.parent_code.detail = '请输入邀请码'
				}
				if(!this.fromValidate.parent_code.validate)return
			}
			if(!this.fromValidate.login_pwd.validate || !this.fromValidate.login_name.validate  || !this.fromValidate.nick_name.validate || !this.fromValidate.avatar_url.validate)return
			let uddata;
			if(this.$config.is_need_invite_code){
				uddata = {
					...this.$store.state.user.deviceInfo,
					...this.fromdata,
				}
			}else{
				uddata = {
					...this.fromdata,
					...this.$store.state.user.deviceInfo
				}
			}
			
			
			this.fromdata.login_name = this.fromdata.login_name.toLowerCase();
			// console.log(uddata);return
			let res = await this.$api.user.reg(uddata)
			if(res){
				this.$u.toast(this.$t('login.register.success'));
				let resLogin = await this.$api.user.login(uddata)
				if(resLogin){
					let saveData = {
						...resLogin.data.user_info,
						login_pwd:this.fromdata.login_pwd
					}
					this.saveOrUpdateAccountInfo(saveData)
					
					uni.showLoading({
						title:this.$t("api.loading.msg.loginNest")
					})
					await this.$store.dispatch('loginNest', {
						data:resLogin.data
					})
					uni.hideLoading()
					this.$u.toast(this.$t('login.login.success'));
					this.$Router.pushTab({
						name: 'index'
					});
				}
			}
			
		},
		triggerFeedback() {
		  // 震动
		  plus.device.vibrate()
				
		  // 添加抖动效果
		  this.shake = true
				
		  // 移除抖动效果，保证后续点击仍能触发抖动
		  setTimeout(() => {
			this.shake = false
		  }, 500); // 抖动时间与动画时间一致
		},
		// 更新或保存账号信息
		saveOrUpdateAccountInfo(accountInfo) {
		    let accounts = uni.getStorageSync('accounts') || [];
		    const index = accounts.findIndex(account => account.login_name == accountInfo.login_name);
		    if (index !== -1) {
		        accounts[index] = accountInfo;
		    } else {
		        accounts.push(accountInfo);
		    }
		    uni.setStorageSync('accounts', accounts);
		},
		goLogin() {
			this.$Router.replace({
				name: 'login'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
	.pageview{
		background-image: url('../../static/loginback.png');
		display: flex;
		flex-direction: column;
		height: 100vh;
		align-items: center;
		.formView{
			margin-top: 40%;
			display: flex;
			flex-direction: column;
		}
	}
	.title1{
		background-image: linear-gradient(
		    180deg,
		    rgba(255, 255, 255, 1) 0,
		    rgba(229, 189, 132, 1) 100%
		  );
		  overflow-wrap: break-word;
		  color: rgba(89, 90, 102, 1);
		  font-size: 48rpx;
		  text-align: left;
		  line-height: 66rpx;
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
	}
	.ControlsBtn{
		background:rgba(255, 255, 255, 0.1);
		border-radius: 46rpx;
		width: 610rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		
		&__text{
			background-image: linear-gradient(
			  180deg,
			  rgba(255, 255, 255, 1) 0,
			  rgba(229, 189, 132, 1) 100%
			);
			overflow-wrap: break-word;
			color: rgba(89, 90, 102, 1);
			font-size: 42rpx;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.login{
		background-image: linear-gradient(
		  180deg,
		  rgba(255, 255, 255, 1) 0,
		  rgba(229, 189, 132, 1) 100%
		);
		overflow-wrap: break-word;
		color: rgba(89, 90, 102, 1);
		text-align: left;
		white-space: nowrap;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.shake {
	  animation: shake 0.5s;
	}
	
	@keyframes shake {
	  0% { transform: translateX(0); }
	  25% { transform: translateX(-10px); }
	  50% { transform: translateX(10px); }
	  75% { transform: translateX(-10px); }
	  100% { transform: translateX(0); }
	}
</style>